<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="icon" href="img/z.png">
	<link rel="stylesheet" href="css/Wayne.css">
	<link rel="stylesheet" href="css/work.css">
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_1468920013_492283.css">
	<title>wayne's resume</title>
</head>
<body>
	<div class="page-wrapper clear-fix">
		<aside>
			<div class="headimg">
				<img src="http://p1.bpimg.com/4851/04da4024e30e9388.jpg" alt="头像">
			</div>
			<a href="" class="myname">罗伟恩</a>
			<div class="menu">
				<div class="menubox">
					<div class="menuinner"></div>
				</div>
			</div>
			<footer>
				<ul class="nav">
					<li><a href="index.html">首页</a></li>
					<li><a href="work.html" class="selected">作品</a></li>
					<li><a href="skill.html">技能</a></li>
					<li><a href="contact.html">联系</a></li>
					<li><a href="http://wayneblog.cn/" target="new">个人博客</a></li>
				</ul>
				<div id="footer">
					<div class="logo">
						<a href="mailto:275434754@qq.com?subject=Job Opportunity" target="_blank" class="r-youxiang r-icon"></a>
						<a href="" target="_blank" class="r-shu r-icon"></a>
						<a href="" target="_blank" class="r-github r-icon"></a>
						<a href="" target="_blank" class="r-weibo r-icon"></a>
					</div>
					<p class="source">
					Open source:<a href="" target="_blank">GitHub</a>
					<br>
					<span class="right">© copyright Wayne,2017</span>
					</p>
				</div>
			</footer>
		</aside>
		<div class="main">
			<div class="workwrapper">
				<p class="project">主要项目</p>
				<div class="project-items clear-fix">
					<a href="" class="project-item1">
						<img src="http://i1.piimg.com/4851/f719c05e9558fb5c.jpg" alt="" class="item1-pic">
						<div class="item1-wrapper">
							<h2 class="item1-title">某理财网站</h2>
							<p class="item1-p">该网站主要实现了简单的响应式，主要运用技术：html,css,js等。</p>
						</div>
					</a>
					<a href="" class="project-item2">
						<img src="http://i1.piimg.com/4851/1f6f3005b4796d5e.jpg" alt="" class="item2-pic">
						<div class="item2-wrapper">
							<h2 class="item2-title">某商城首页</h2>
							<p class="item2-p">仿某首页项目，完全按照该商城样式制作，高精度还原，主要运用技术：html5，css3，jQuery等</p>
						</div>
					</a>
					<a href="" class="project-item3">
						<img src="https://oapy20uns.qnssl.com/slide.jpg" alt="" class="item3-pic">
						<div class="item3-wrapper">
							<h2 class="item3-title">轮播插件</h2>
							<p class="item3-p">面向对象的轮播插件，代码清晰，交互有好，使用方便，不依赖CSS，主要运用技术：jQuery</p>
						</div>
					</a>
					<a href="" class="project-item4">
						<img src="http://p1.bqimg.com/567571/05c0efec1fa92ca3.png" alt="" class="item4-pic">
						<div class="item4-wrapper">
							<h2 class="item4-title">音乐播放器</h2>
							<p class="item4-p">使用面向对象的代码封装背景由canvas绘制仍在扩展特效，界面简约，依赖百度fm的海量音乐资源，支持随机频道，随机歌曲，暂停\播放，单曲循环，随机播放，歌词随时间显示功能，利用localStorage存储收藏歌曲功能，主要运用技术：html，css3，jquery，html5等</p>
						</div>
					</a>
				</div>
				<p class="demo">小设计</p>
				<div class="demo-items clear-fix">
					<a href="" class="demo-item1">
						<img src="http://p1.bpimg.com/4851/1835df02a7dfbe6f.jpg" alt="" class="item1-pic">
						<div class="item1-wrapper">
							<h2 class="item1-title">贪吃蛇游戏</h2>
							<p class="item1-p">纯JS实现的贪吃蛇游戏，面向对象代码封装</p>
						</div>
					</a>
					<a href="" class="demo-item2">
						<img src="https://oapy20uns.qnssl.com/bigger.png" alt="" class="item2-pic">
						<div class="item2-wrapper">
							<h2 class="item2-title">常见功能实现</h2>
							<p class="item2-p">实现回到顶部、各种轮播、瀑布流等</p>
						</div>
					</a>
					<a href="" class="demo-item3">
						<img src="https://oapy20uns.qnssl.com/chrome.jpg" alt="" class="item3-pic">
						<div class="item3-wrapper">
							<h2 class="item3-title">vue实现的在线简历生成工具</h2>
							<p class="item3-p">利用Vue+LeanStorage开发的可注册，可登陆，可存储的todolist面板，不是存储在LocalStorage，所有数据都存储在LeanStorage</p>
						</div>
					</a>
					<a href="" class="demo-item4">
						<img src="https://oapy20uns.qnssl.com/star.png" alt="" class="item4-pic">
						<div class="item4-wrapper">
							<h2 class="item4-title">纯jq实现的todolist</h2>
							<p class="item4-p">CSS3动画制作的太阳系模型</p>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<script src="https://oapy20uns.qnssl.com/jquery-1.12.4.min.js"></script>
	<script>
		$('.menu').on('click',function(){
			$('aside').toggleClass('active')
		})
	</script>
</body>
</html>